<template>
  <div>
    <div v-for="(item,index) in tickets" :key="index">
       <h1 @click="switchTab(index)" :class="{active:currentIndex==index}">{{item.name}}</h1>
       <ul v-show="currentIndex==index">
          <li v-for="(sitem,sindex) in item.list" :key="sindex">
            {{sitem.name}}
          </li>
       </ul>
    </div>
  </div>
</template>
  
<script>
export default {
  data() {
    return {
      currentIndex:0,
      tickets: [
        {
          name: "国内旅游",
          list: [
            {
              name: "内蒙古",
            },
            {
              name: "张家界",
            },
            {
              name: "桂林",
            },
            {
              name: "三亚",
            },
          ],
        },
        {
          name: "国外旅游",
          list: [
            {
              name: "芝加哥",
            },
            {
              name: "东京",
            },
            {
              name: "伦敦",
            },
            {
              name: "新德里",
            },
          ],
        },
      ],
    };
  },
  methods:{
    switchTab(index){
      this.currentIndex=index
    }
  }
};
</script>

<style>
  .active{
    color: red;
  }
  .active::after{
    content:' ';
    display: block;
    width: 130px;
    height: 5px;
    background-color: orange;
  }
</style>